<div #board class="board infocus" id="board" oncontextmenu="return false;"
 (mousedown.self)="handleMousedown( $event )" (click.self)="handleSelfClick()" (click)="handleClick()"
 (touchstart.self)="handleMousedown($event); handleSelfClick()" (pinchout)="zoomIn(8)" (pinchin)="zoomOut(8)">
    <template #conn></template>
    <svg class="svg-canvas" id="svg-canvas" >
    </svg>
    <div [style.transform]="'scale(' + 1/placingService.boardScale + ')'" oncontextmenu="return false;" class="context-menu" *ngIf="showContextMenu" [style.top.px]="contextMenuY" [style.left.px]="contextMenuX">
        <div class="menu">
            <div class="item" (click)="pasteItem(contextMenuX, contextMenuY); showContextMenu = false">Paste here</div>
            <hr class="line">
            <div class="item" (click)="selectAll(); showContextMenu = false">Select all</div>
            <hr class="line">
            <div class="item" (click)="zoomIn(); showContextMenu = false">Zoom in</div>
            <div class="item" (click)="zoomOut(); showContextMenu = false">Zoom out</div>
            <hr class="line">
            <div class="item" (click)="undo(); showContextMenu = false">Undo</div>
            <div class="item" (click)="redo(); showContextMenu = false">Redo</div>
            <div class="item" (click)="save(true); showContextMenu = false">Save</div>
            <hr class="line">
            <div class="item" (click)="resetView(); showContextMenu = false">Reset view</div>
        </div>
    </div>
    <div [style.transform]="'scale(' + 1/placingService.boardScale + ')'" oncontextmenu="return false;" class="context-menu" *ngIf="showComponentContextMenu" [style.top.px]="contextMenuY" [style.left.px]="contextMenuX">
        <div class="menu">
            <div class="item" (click)="delete(); showComponentContextMenu = false">Delete</div>
            <hr class="line">
            <div class="item" (click)="copyItem(); showComponentContextMenu = false">Copy</div>
            <div class="item" (click)="cutItem(); showComponentContextMenu = false">Cut</div>
        </div>
    </div>
    <div [style.top]="simulationService.Model.options.Y + 'px'" [style.left]="simulationService.Model.options.X + 'px'" class="simulation-card" *ngIf="simulationService.isSimulationCardOpen">
        <div class="card-top">
            <span class="title">
                <span *ngIf="simulationService.Model.options.title.length > 20; else fullTitle">
                    {{ simulationService.Model.options.title | slice:0:20 }}...
                </span>
                <ng-template #fullTitle>
                    {{ simulationService.Model.options.title}}
                </ng-template>
                
                <small><br>
                    ({{ simulationService.Model.options['performance'] < 4 ? 'Low' : simulationService.Model.options['performance'] < 8 ? 'Medium' : 'High' }} performance)
                </small>
            </span>
        </div>
        <div class="card-body">
            <p>Response time: <b>{{ simulationService.Model['simulationState'].responseTime > 5000 ? '>5000' : '~' + simulationService.Model['simulationState'].responseTime }}</b>ms</p>
            <p>Maximum flow: <b>{{ simulationService.Model.options['performance'] }}</b></p>
            <p>Incoming flow: <b [style.color]="'hsl(' + simulationService.Model['simulationState'].rating + ', 74%, 36%)'">{{ simulationService.Model['simulationState'].incomingFlow }}</b></p>
            <p>Currently processing <b>{{ simulationService.Model['requestCount'] }}</b> requests</p>
        </div>
        <svg class="svg-meter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" height="20" width="24">
            <path [attr.fill]="'hsl(' + simulationService.Model['simulationState'].rating + ', 74%, 36%)'"
                d="M 12 0 C 5.3830004 0 2.3684758e-15 5.383 0 12 C -0.0013500031 14.7847 0.97151 17.4822 2.75 19.625 L 3.03125 20 L 20.970703 20 L 21.251953 19.625 C 23.030053 17.482 24.0016 14.7846 24 12 C 24 5.383 18.617 0 12 0 z M 12 2 C 17.535 2 22 6.465 22 12 C 22 14.266 21.2075 16.324 19.9375 18 L 4.0625 18 C 2.7925 16.324 2 14.266 2 12 C 2 6.465 6.4650004 2 12 2 z M 12 3 C 11.45 3 11 3.45 11 4 C 11 4.55 11.45 5 12 5 C 12.55 5 13 4.55 13 4 C 13 3.45 12.55 3 12 3 z M 8 4.0625 C 7.45 4.0625 7 4.5115 7 5.0625 C 7 5.6125 7.45 6.0625 8 6.0625 C 8.55 6.0625 9 5.6125 9 5.0625 C 9 4.5115 8.55 4.0625 8 4.0625 z M 16 4.0625 C 15.45 4.0625 15 4.5115 15 5.0625 C 15 5.6125 15.45 6.0625 16 6.0625 C 16.55 6.0625 17 5.6125 17 5.0625 C 17 4.5115 16.55 4.0625 16 4.0625 z M 5.0625 7 C 4.5125 7 4.0625 7.45 4.0625 8 C 4.0625 8.55 4.5125 9 5.0625 9 C 5.6135 9 6.0625 8.55 6.0625 8 C 6.0625 7.45 5.6135 7 5.0625 7 z M 18.9375 7 A 0.9999994 0.9999994 0 0 0 17.9375 8 A 0.9999994 0.9999994 0 0 0 18.9375 9 A 0.9999994 0.9999994 0 0 0 19.9375 8 A 0.9999994 0.9999994 0 0 0 18.9375 7 z M 4 11 C 3.45 11 3 11.45 3 12 C 3 12.55 3.45 13 4 13 C 4.55 13 5 12.55 5 12 C 5 11.45 4.55 11 4 11 z M 20 11 C 19.45 11 19 11.45 19 12 C 19 12.55 19.45 13 20 13 C 20.55 13 21 12.55 21 12 C 21 11.45 20.55 11 20 11 z M 5.0625 15 C 4.5125 15 4.0625 15.45 4.0625 16 C 4.0625 16.55 4.5125 17 5.0625 17 C 5.6135 17 6.0625 16.55 6.0625 16 C 6.0625 15.45 5.6135 15 5.0625 15 z M 18.9375 15 C 18.3865 15 17.9375 15.45 17.9375 16 C 17.9375 16.55 18.3865 17 18.9375 17 C 19.4875 17 19.9375 16.55 19.9375 16 C 19.9375 15.45 19.4875 15 18.9375 15 z "
            />
            <line [style.transform]=" 'rotateZ(' + (180 - (simulationService.Model['simulationState'].rating / 100) * 180) + 'deg)' " 
            class="hand" x1="4" y1="12" x2="12" y2="12"></line>
         </svg>
         
        <span class="close" (click)="simulationService.closeSimulationCard()">
            <i class="fas fa-times"></i>
        </span>
    </div>
</div>
<div class="backdrop-centralized loading" *ngIf="isLoading">
    Loading...
    <img src="./assets/logo.svg">
</div>
<div *ngIf="!isReadOnly">
    <div class="autosave" *ngIf="isAutosaving">
        <i class="far fa-save"></i>
    </div>
    <div class="backdrop-centralized" [style.display]="showSavedBoards ? 'flex' : 'none'" (click.self)="closeSavedBoards()">
        <div class="saved-boards">
            <button class="close" (click)="closeSavedBoards()">×</button>
            <div class="saved-boards-top">
                <h3 class="title">Your saved systems</h3>
                <span class="note">Note that these systems are saved in your browser and aren't permanent!</span>
            </div>
            <div class="saved-boards-main-container">
                <div class="saved-boards-main" #savedBoardsRef>
                    <span *ngIf="savedBoards == null || savedBoards.length == 0">You don't have any saved boards...</span>
                </div>
                <div class="saved-boards-side">
                    <span class="selected-title">{{ selectedSavedBoard == null ? "Select a board" : selectedSavedBoard.title }}</span>
                    <div class="selected-info">
                        <span *ngIf="selectedSavedBoard != null"><span class="highlight">{{ selectedSavedBoard.board.length }}</span> component{{ selectedSavedBoard.board.length == 1 ? "" : "s" }}</span>
                    </div>
                    <div class="selected-actions">
                        <button (click)="deleteSelectedSavedBoard()" [disabled]="selectedSavedBoard == null" class="delete">Delete</button>
                        <button (click)="loadSelectedSavedBoard()" [disabled]="selectedSavedBoard == null" class="load">Load</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="saved-boards-popup" [style.transform]="showSavedBoardsPopup ? 'translateX(0)' : 'translateX(calc(100% - 2.15em))' ">
        <span class="hidden">{{ savedBoards.length }}</span>
        <div class="show" >
            <span class="text">You have {{ savedBoards.length }} saved system<span *ngIf="savedBoards.length != 1">s</span></span>
            <button (click)="openSavedBoards()">Show all</button>
        </div>
    </div>
</div>
<div class="read-only-controls" *ngIf="isReadOnly">
    <div class="controls">
        <button *ngIf="!isAllClientsSendingData" (click)="startAllClients()" matTooltip="{{ 'Start animation' }}"><i class="fas fa-play"></i></button>
        <button *ngIf="isAllClientsSendingData" (click)="stopAllClients()" matTooltip="{{ 'Stop animation' }}"><i class="fas fa-stop"></i></button>
        <button (click)="zoomIn()" matTooltip="{{ 'Zoom in' }}"><i class="fas fa-search-plus"></i></button>
        <button (click)="zoomOut()" matTooltip="{{ 'Zoom out' }}"><i class="fas fa-search-minus"></i></button>
        <button (click)="resetView()" matTooltip="{{ 'Reset view' }}"><i class="fas fa-search"></i></button>
        <button (click)="toggleTitles()" matTooltip="{{ 'Toggle titles' }}"><i class="fas fa-heading"></i></button>
        <a target="_blank" href="{{viewerEditLink}}" matTooltip="{{ 'Edit board' }}"><i class="fas fa-edit"></i></a>
    </div>
</div>
<p class="read-only-watermark" *ngIf="isReadOnly">
    Visualization provided by <a target="_blank" href="https://honzaap.github.io/Systemizer">Systemizer</a>
</p>
<p class="read-only-tip" *ngIf="isReadOnly" matTooltip="{{ 'You can also hover over individual Clients to send data' }}">
    ?
</p>